<template>
<div>
权限管理<br>
用户编号：{{userObj.id}}
用户名：{{userObj.name}}

  <div style="display: flex">
    <div v-for="grade in gradeList" :key="gradeId" >
      <input type="checkbox"  :value="grade.id" v-model="gradeIdArray" />
      {{grade.name}}
    </div>


    </div>
{{gradeIdArray}}

</div>
</template>

<script>
export default {
    data(){
        return{
          gradeIdArray:[],
        gradeList:[
          {id:1,name:"用户管理"},
          {id:2,name:"商品管理"},
          {id:3,name:"权限管理"},
          {id:4,name:"角色管理"},
          {id:5,name:"系统管理"},
          {id:6,name:"统计信息"}
        ],
          userObj:{
          id:1,
            name:'tom',
            userGradeList:[{id:3,name:"权限管理"},{id:6,name:"统计信息"}]

          }
      }
    },
created() {
      this.gradeIdArray = this.userObj.userGradeList.map( n =>n.id)
},
  name: "checkboxTest"
}
</script>

<style scoped>

</style>